<template>
  <div>
    <el-form ref="form" :model="form" label-width="120px" style="width: 650px">
      <el-form-item label="标题">
        <el-input type="text" v-model="form.consultation_title"></el-input>
      </el-form-item>
      <el-form-item label="内容">
        <quill-editor
          class="ql-editor"
          v-model="form.consultation_text"
          ref="myQuillEditor"
          :options="editorOption"
        ></quill-editor>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addconsultation">新增资讯</el-button>
        <el-button @click="resetform">重置</el-button>
        <el-button @click="cancel">取消返回</el-button>
      </el-form-item>
    </el-form>
    <el-upload
      v-show="false"
      class="avatar-uploader"
      :action="`${UPLOADURL}/upload`"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
    </el-upload>
  </div>
</template>

<script>
import httpApi from "@/http";
import { quillEditor, Quill } from "vue-quill-editor";
import ImageResize from "quill-image-resize-module"; // 引用，调整图片大小
Quill.register("modules/imageResize", ImageResize);
// 自定义字体大小
const Size = Quill.import("attributors/style/size");
Size.whitelist = ["10px", "12px", "16px", "18px", "20px", "30px", "32px"];
Quill.register(Size, true);

export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      form: {
        consultation_title: "",
        consultation_text: "",
        username: JSON.parse(sessionStorage.getItem("user_name")).user_name,
        consultation_data: "",
      },
      // 富文本编辑器配置

      editorOption: {
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
              ["blockquote", "code-block"], // 引用  代码块
              [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
              [{ script: "sub" }, { script: "super" }], // 上标/下标
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              [{ direction: "rtl" }], // 文本方向
              [{ size: ["12px", false, "16px", "18px", "20px", "30px"] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
              [{ align: [] }], // 对齐方式
              ["clean"], // 清除文本格式
              ["image"], // 链接、图片、视频
            ],
            handlers: {
              image: function (value) {
                if (value) {
                  // value === true
                  document.querySelector(".avatar-uploader input").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
          imageResize: {
            handleStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white",
            },
          },
        },
      },
    };
  },
  methods: {
    resetform() {
      this.form.consultation_title = "";
      this.form.consultation_text = "";
      this.form.username = JSON.parse(
        sessionStorage.getItem("user_name")
      ).user_name;
      this.form.consultation_data = "";
    },
    cancel() {
      this.$router.push("/home/information-list");
    },
    addconsultation() {
      if (this.form.consultation_title == "") {
        this.$message({
          message: "请输入标题",
          type: "warning",
        });
        return;
      }
      if (this.form.consultation_text == "") {
        this.$message({
          message: "请输入内容",
          type: "warning",
        });
        return;
      }
      this.form.consultation_data = this.$moment().format(
        "YYYY-MM-DD HH:mm:ss"
      );
      httpApi.consultationApi.add(this.form).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message.success("资讯添加成功");
          this.$router.push("/home/information-list");
        } else {
          this.$message.error("添加失败请检查");
        }
      });
    },
    // 图片上传处理
    handleAvatarSuccess(res, file) {
      console.log(res, file);
      const imageUrl = res.data;
      // 获取光标所在位置
      let quill = this.$refs.myQuillEditor.quill;
      let length = quill.getSelection().index;
      // 插入图片
      quill.insertEmbed(length, "image", imageUrl);
      // 调整光标到最后
      quill.setSelection(length + 1);
      // this.content += url
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传驾校照片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传驾校照片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style lang="scss">
.ql-editor {
  padding: 0;
  .ql-container {
    height: 240px;
    overflow: auto;
  }
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
  font-size: 14px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
  content: "10px";
  font-size: 10px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  content: "12px";
  font-size: 12px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: "16px";
  font-size: 16px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: "18px";
  font-size: 18px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: "20px";
  font-size: 20px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
  content: "30px";
  font-size: 30px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
  content: "32px";
  font-size: 32px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}
/*加上height和滚动属性就可以，滚动条样式是系统默认样式，可能不同*/
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
  height: 125px;
  overflow: auto;
}
</style>
